<template>
    <div class="container">
        <el-header>
            <div class="logo">
                <img src="@/assets/IMAGES/kj-logo.png" alt="" />
            </div>
            <!--标题-->
            <div class="screen-title">
                <h3>集团数据监控</h3>
                <p>{{ currentTime }}</p>
            </div>
        </el-header>

        <header>
            <el-page-header @back="goBack" :content="$route.query.title">
            </el-page-header>
        </header>
        <div class="data-list">
            <!-- 活跃用户 -->
            <el-table :data="tableData" border v-loading="loading" style="width: 100%" :row-style="{
              color: '#fff',
              backgroundColor: '#18142c'
            }" :header-row-style="{
              color: '#fff',
              backgroundColor: '#18142c'
            }" :header-cell-style="{
              color: '#fff',
              backgroundColor: '#18142c'
            }">
                <el-table-column prop="patientNo" label="编号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="patientName" label="姓名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gender" label="性别" show-overflow-tooltip :formatter="genderFormatter">
                </el-table-column>
                <el-table-column prop="age" label="年龄" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="spareOne" label="联系地址"> </el-table-column>
            </el-table>
            <!-- 付费用户 -->
            <el-table :data="tableData" border v-loading="loading" style="width: 100%" :row-style="{
              color: '#fff',
              backgroundColor: '#18142c'
            }" :header-row-style="{
              color: '#fff',
              backgroundColor: '#18142c'
            }" :header-cell-style="{
              color: '#fff',
              backgroundColor: '#18142c'
            }">
                <el-table-column prop="patientNo" label="编号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="patientName" label="姓名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gender" label="性别" show-overflow-tooltip :formatter="genderFormatter">
                </el-table-column>
                <el-table-column prop="age" label="年龄" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="spareOne" label="联系地址"> </el-table-column>
            </el-table>
            <!--机构-->
            <el-table :data="tableData" border v-if="isModal == '机构'" v-loading="loading" style="width: 100%"
                :row-style="{
                  color: '#fff',
                  backgroundColor: '#18142c'
                }" :header-row-style="{
                  color: '#fff',
                  backgroundColor: '#18142c'
                }" :header-cell-style="{
                  color: '#fff',
                  backgroundColor: '#18142c'
                }">
                <el-table-column prop="hospitalNo" label="编号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="hospitalName" label="机构名称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="hospitalName" label="机构类型" show-overflow-tooltip></el-table-column>
                <el-table-column prop="legalRepresentative" label="联系人" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
                <el-table-column label="联系地址">
                    <template slot-scope="scope">
                        {{ scope.row.province }} {{ scope.row.city }} {{ scope.row.areaName
                        }}{{ scope.row.adderss }}
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination background :hide-on-single-page="isShow" layout="total,prev, next"
                    @current-change="handleCurrentChange" :current-page.sync="startPage" :page-size="pageSize"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "screenDataList",
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            currentTime: this.$base.timeSwitch(new Date(), true),
            total: 1000,
            loading: false,
            pageSize: 12,
            startPage: 1,
            isModal: "",
            isShow: false,
        };
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        handleCurrentChange(val) {
            this.startPage = val;
            this.switchData();
        },
        switchData() {
            this.isModal = this.$route.query.title;
            switch (this.$route.query.title) {
                case "个人用户数据":
                    this.getClientData();
                    break;

                case "组织用户数据":
                    this.getBusinessData();
                    break;

                case "医院":
                    this.getHospitalData();
                    break;

                case "药店":
                    this.getDrugStoreData();
                    break;

                case "采购记录":
                    this.getPurchase();
                    break;

                case "销售记录":
                    this.getAllScSell();
                    break;

                case "库存类别":
                    this.getAllScStock();
                    break;

                case "电商用户":
                    this.getEUsers();
                    break;

                case "电商商品":
                    this.getEGoods();
                    break;

                case "电商订单":
                    this.getEOrder();
                    break;

                //养老院
                default:
                    this.isModal = "";
                    this.getOldPeopleHome();
                    break;
            }
        },
        //获取个人数据
        async getClientData() {
            this.loading = true;
            let data = {
                pageSize: this.pageSize,
                startPage: this.startPage,
            };
            let res = await this.$base.postForm(
                1,
                "/datadisplay/user/findAllUserC",
                data
            );
            this.loading = false;
            this.tableData = res.data.pageInfo.list;
            this.total = res.data.pageInfo.total;
            this.isShowFunction(res.data.pageInfo.total);
        },
        //获取组织数据
        async getBusinessData() {
            this.loading = true;
            let data = {
                pageSize: this.pageSize,
                startPage: this.startPage,
            };
            let res = await this.$base.postForm(
                1,
                "/datadisplay/user/findAllUserB",
                data
            );
            this.loading = false;
            this.tableData = res.data.pageInfo.list;
            this.total = res.data.pageInfo.total;
            this.isShowFunction(res.data.pageInfo.total);
        },
        //获取医院详情数据
        async getHospitalData() {
            this.loading = true;
            let data = {
                pageSize: this.pageSize,
                startPage: this.startPage,
            };
            let res = await this.$base.postForm(
                1,
                "/datadisplay/institution/findAllHospital",
                data
            );
            this.loading = false;

            this.tableData = res.data.pageInfo.list;
            this.total = res.data.pageInfo.total;
            this.isShowFunction(res.data.pageInfo.total);
        },
        //获取药店详情数据
        async getDrugStoreData() {
            this.loading = true;
            let data = {
                pageSize: this.pageSize,
                startPage: this.startPage,
                type: this.$route.query.type,
            };
            let res = await this.$base.postForm(
                1,
                "/datadisplay/institution/findAllDrugstore",
                data
            );
            this.loading = false;
            this.tableData = res.data.pageInfo.list;
            this.total = res.data.pageInfo.total;
            this.isShowFunction(res.data.pageInfo.total);
        },
        //获取养老院详情数据
        async getOldPeopleHome() {
            this.loading = true;
            let data = {
                pageSize: this.pageSize,
                startPage: this.startPage,
                type: this.$route.query.type,
            };
            let res = await this.$base.postForm(
                1,
                "/datadisplay/institution/findAllRestHomeByType",
                data
            );
            this.loading = false;
            this.tableData = res.data.pageInfo.list;
            this.total = res.data.pageInfo.total;
            this.isShowFunction(res.data.pageInfo.total);
        },
        //获取采购
        async getPurchase() {
            this.loading = true;
            let data = {
                pageSize: this.pageSize,
                startPage: this.startPage,
            };
            let res = await this.$base.postForm(
                1,
                "/datadisplay/supplyChain/findAllScPurchase",
                data
            );
            this.loading = false;
            this.tableData = res.data.pageInfo.list;
            this.total = res.data.pageInfo.total;
            this.isShowFunction(res.data.pageInfo.total);
        },
        //获取销售
        async getAllScSell() {
            this.loading = true;
            let data = {
                pageSize: this.pageSize,
                startPage: this.startPage,
            };
            let res = await this.$base.postForm(
                1,
                "/datadisplay/supplyChain/findAllScSell",
                data
            );
            this.loading = false;
            this.tableData = res.data.pageInfo.list;
            this.total = res.data.pageInfo.total;
            this.isShowFunction(res.data.pageInfo.total);
        },
        //库存
        async getAllScStock() {
            this.loading = true;
            let data = {
                pageSize: this.pageSize,
                startPage: this.startPage,
            };
            let res = await this.$base.postForm(
                1,
                "/datadisplay/supplyChain/findAllScStock",
                data
            );
            this.loading = false;
            this.tableData = res.data.pageInfo.list;
            this.total = res.data.pageInfo.total;
            this.isShowFunction(res.data.pageInfo.total);
        },
        //获取电商用户
        async getEUsers() {
            this.loading = true;
            let data = {
                pageSize: this.pageSize,
                startPage: this.startPage,
            };
            let res = await this.$base.postForm(
                1,
                "/datadisplay/youzan/findAllUser",
                data
            );
            this.loading = false;

            this.tableData = res.data.pageInfo.list;
            this.total = res.data.pageInfo.total;
            this.isShowFunction(res.data.pageInfo.total);
        },
        //获取电商商品
        async getEGoods() {
            this.loading = true;
            let data = {
                pageSize: this.pageSize,
                startPage: this.startPage,
            };
            let res = await this.$base.postForm(
                1,
                "/datadisplay/youzan/findAllGoods",
                data
            );
            this.loading = false;

            this.tableData = res.data.pageInfo.list;
            this.total = res.data.pageInfo.total;
            this.isShowFunction(res.data.pageInfo.total);
        },
        //获取电商订单
        async getEOrder() {
            this.loading = true;
            let data = {
                pageSize: this.pageSize,
                startPage: this.startPage,
            };
            let res = await this.$base.postForm(
                1,
                "/datadisplay/youzan/findAllOrder",
                data
            );
            this.loading = false;

            this.tableData = res.data.pageInfo.list;
            this.total = res.data.pageInfo.total;
            this.isShowFunction(res.data.pageInfo.total);
        },
        //判断分页显示
        isShowFunction(total) {
            if (total > this.pageSize) {
                this.isShow = false;
            } else {
                this.isShow = true;
            }
        },
        //表格过滤
        flagFilter(row, column, cellValue, index) {
            if (cellValue == 0) {
                return "启用";
            } else {
                return "停用";
            }
        },
        isMemberFormatter(row, column, cellValue) {
            if (cellValue == 1) {
                return "是";
            } else {
                return "否";
            }
        },
        genderFormatter(row, column, cellValue) {
            if (cellValue == 1) {
                return "男";
            } else {
                return "女";
            }
        },
        itemTypeFormatter(row, column, cellValue) {
            //0—普通商品 3—UMP降价拍 5—外卖商品 10—分销商品 20—会员卡商品 21—礼品卡商品 22—团购券 25—批发商品 30—收银台商品 31—知识付费商品 35—酒店商品 40—美业商品 60—虚拟商品 61—电子卡券
            switch (cellValue) {
                case 0:
                    return "普通商品";
                    break;
                case 3:
                    return "UMP降价拍";
                    break;
                case 5:
                    return "外卖商品";
                    break;
                case 10:
                    return "分销商品";
                    break;
                case 20:
                    return "会员卡商品";
                    break;
                case 21:
                    return "礼品卡商品";
                    break;
                case 22:
                    return "团购券";
                    break;
                case 25:
                    return "批发商品";
                    break;
                case 30:
                    return "收银台商品";
                    break;
                case 31:
                    return "知识付费商品";
                    break;
                case 35:
                    return "酒店商品";
                    break;
                case 40:
                    return "美业商品";
                    break;
                case 60:
                    return "虚拟商品";
                    break;
                case 61:
                    return "电子卡券";
                    break;
            }
        },
        itemSourceFormatter(row, column, cellValue) {
            if (cellValue == 1) {
                return "网店自建";
            } else {
                return "普通";
            }
        },
        orderStatusFormatter(row, column, cellValue) {
            switch (cellValue) {
                case "WAIT_BUYER_PAY":
                    return "等待买家付款";
                    break;
                case "TRADE_PAID":
                    return "订单已支付";
                    break;
                case "WAIT_CONFIRM":
                    return "待确认";
                    break;
                case "WAIT_SELLER_SEND_GOODS":
                    return "等待卖家发货";
                    break;
                case "WAIT_BUYER_CONFIRM_GOODS ":
                    return "等待买家确认收货";
                    break;
                case "TRADE_SUCCESS":
                    return "买家已签收以及订单成功";
                    break;
                case "TRADE_CLOSED":
                    return "交易关闭";
                    break;
            }
        },
        cpPayTypeFormatter(row, column, cellValue) {
            switch (cellValue) {
                case "1":
                    return "微信支付";
                    break;
                case "2":
                    return "支付宝wap";
                    break;
                case "3":
                    return "支付宝pc付款";
                    break;
                case "7":
                    return "代付";
                    break;
                case "9":
                    return "货到付款";
                    break;
                case "10":
                    return "大账号代销";
                    break;
                case "16":
                    return "优惠兑换";
                    break;
                case "28":
                    return "有赞E卡支付";
                    break;
                case "36":
                    return "信用卡银联支付";
                    break;
                case "37":
                    return "储蓄卡银联支付";
                    break;
                case "0":
                    return "未支付";
                    break;
            }
        },
        isPayFormatter(row, column, cellValue) {
            if (cellValue == 0) {
                return "成功";
            } else if (cellValue == 1) {
                return "未支付";
            } else if (cellValue == 2) {
                return "待支付";
            } else if (cellValue == 3) {
                return "已过期";
            } else {
                return "已退款";
            }
        },

        priceFormatter(row, column, cellValue) {
            if (cellValue > 0) {
                return this.$base.accDiv(cellValue, 100);
            } else {
                return cellValue;
            }
        },
    },
    filters: {
        receiveMethodFormatter(cellValue) {
            if (cellValue == 0) {
                return "快递发货";
            } else if (cellValue == 1) {
                return "到店自提";
            } else if (cellValue == 2) {
                return "同城配送";
            } else {
                return "无需发货（虚拟商品订单）";
            }
        },
        shippingStatusFormatter(cellValue) {
            if (cellValue == 0) {
                return "已配送";
            } else {
                return "未配送";
            }
        },
    },
    created() {
        // this.switchData();
        setInterval(() => {
            this.currentTime = this.$base.timeSwitch(new Date(), true);
        }, 1000);
    },
};
</script>
<style lang="scss" scoped>
.container {
    min-height: 100vh;
    padding: 0 20px 20px;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #29243d;
}

.el-header {
    min-height: 5vh;
    padding: 10px 20px;
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #29243d;

    .logo {
        height: 5vh;
        box-sizing: border-box;
    }

    .screen-title {
        color: #ffffff;
        margin-right: 12px;

        h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 4px;
            text-align: right;
        }

        p {
            font-size: 14px;
            letter-spacing: 1px;
        }
    }
}

header {
    position: fixed;
    z-index: 3;
    left: -20px;
    width: 100%;
    color: #fff;
    padding: 20px 40px;
    border-bottom: 1px solid #ccc;
}

.data-list {
    position: relative;
    top: 84px;
    margin-bottom: 84px;
}

.page {
    width: 800px;
    font-size: 16px;
    margin: 10px auto;
    text-align: center;
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 48px;
    width: 40%;
}
</style>